<template>
  <div class="wrap">
    <div class="form-box">
      <div class="title">密码找回</div>
      <el-form ref="forgetForm" :model="currentForm" :rules="rules" auto-complete="on" label-position="left">
        <el-form-item class="label" prop="email">
          <el-input placeholder="请输入您的邮箱" v-model="currentForm.email" name="email"></el-input>
        </el-form-item>

        <el-form-item class="label captcha" prop="captcha">
          <el-input placeholder="请输入图形验证码" v-model="currentForm.captcha" auto-complete="off">
            <template slot="append"><img :src="captchaSrc" class="captcha-img" alt="" @click="getCaptcha"></template>
          </el-input>
        </el-form-item>

        <el-form-item class="label mobile-code-label" prop="code">
            <el-input
              ref="code"
              v-model="currentForm.code"
              placeholder="验证码"
              name="code"
              tabindex="2"
              auto-complete="off"
            />
            <span class="mobile-code">
              <el-button
                size="small"
                type="primary"
                @click="sendCode"
                :disabled="codeLoading"
              >{{btnText}}</el-button>
            </span>
        </el-form-item>

        <div class="label captcha">

        </div>

      </el-form>

      <div class="footer">
        <el-row :gutter="12">
          <el-col :span="8">
            <el-button style="width: 100%;" type="info" @click="goBack">上一步</el-button>
          </el-col>
          <el-col :span="16">
            <el-button style="width: 100%;" type="primary" @click="next" :loading="loading">下一步</el-button>
          </el-col>

        </el-row>

      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import {deepCopy, isEmail, isMobile} from "@/utils";
import {sendEmailCode, sendMobileCode} from "@/api/login";
import {checkEmail, checkMobile} from "@/api/business";

export default {
  name: "resetPassword",
  data(){
    const validateMobile = (rule,value,callback) => {
      if (!isMobile(value)) {
        callback(new Error('手机号码格式不正确'))
      } else {
        callback()
      }
    }

    const validateEmail = (rule,value,callback) => {
      if (!isEmail(value)) {
        callback(new Error('邮箱格式不正确'))
      } else {
        callback()
      }
    }

    return {
      currentForm:{
        email: '',
        captcha: '', // 图形验证码
        code: '', // 手机验证码
      },
      captchaSrc : '',
      codeLoading: false,
      loading: false,
      btnText : '发送验证码',
      businessId : '',
      rules: {
        mobile: [
          { required: true, validator:validateMobile ,trigger: 'blur' }, // 校验手机号格式
        ],
        email:[
          { required: true, validator:validateEmail, trigger: 'blur' }
        ],
        code: [
          { required: true,message: "请填写验证码"  ,trigger: 'blur' },
        ],
        captcha: [
          { required: true,message: "请填写图形验证码"  ,trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.businessId = this.$store.getters.id;
    this.getCaptcha()
  },
  methods:{
    // 下一步
    next(){
      this.$refs.forgetForm.validate(valid => {
        if (valid) {
          this.loading = true;
          const postData = deepCopy(this.currentForm)
          checkEmail(postData)
            .then(res=>{
              this.loading = false
              if(res.error != 0){
                this.$errorMessage(res.message)
              }else{
                this.$router.push({
                  name: 'resetPassword2',
                  query: {
                    type:2
                  },
                })
              }
            })
        }
      })
    },
    // 上一步
    goBack(){
      this.$router.go(-1);
    },
    // 获取图形验证码
    getCaptcha(){
      this.captchaSrc = process.env.VUE_APP_BASE_API + '/captcha?id=' + this.businessId + '&' + Math.random()
    },
    // 手机验证码
    sendCode(){
      if(!isEmail(this.currentForm.email)){
        this.$errorMessage('邮箱格式不正确')
        return;
      }
      this.$refs.code.focus()
      this.codeLoading = true
      this.btnText = '请稍后...'
      // 发送请求
      sendEmailCode(this.currentForm.email,'rePassword')
        .then(res=>{
          if(res.error === 0){
            this.doLoop();
            this.$successMessage('验证码已发送');
          }else{
            this.codeLoading = false;
            this.$errorMessage(res.message);
            this.btnText = '获取验证码'
          }
        })
    },
    // 倒数验证码
    doLoop(seconds = 60){
      this.btnText = seconds + "s后获取";
      let countDown = setInterval(()=>{
        if(seconds > 0){
          this.btnText = seconds + "s后获取";
          seconds--;
        }else{
          this.btnText = "获取验证码";
          this.codeLoading = false;
          clearInterval(countDown);
        }
      },1000)
    },
  }
}
</script>

<style scoped lang="scss">
.wrap{
  padding: 30px 30px;
  .form-box{
    width: 420px;
    max-width: 100%;
    min-height: 250px;
    background-color: #ffffff;
    padding: 50px 30px 30px 30px;
    //padding: 160px 35px 0;
    margin: 50px auto;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #d7d7d7;
    .title{
      text-align: center;
      font-weight: 700;
      margin-bottom: 30px;
    }
    .label{
      margin-bottom: 20px;
    }
    .tips{
      display: flex;
      flex-direction: row-reverse;
    }
    .footer{
      margin-top: 20px;
    }
    .captcha-img{
      cursor: pointer;
      height: 25px;
    }
    .mobile-code-label{
      position: relative;
      .mobile-code {
        position: absolute;
        right: 0;
        top: -2px;
        font-size: 16px;
        cursor: pointer;
        user-select: none;
      }
    }

    //box-shadow:darkgrey 10px 10px 30px 5px;
  }
}
</style>
